<template>
  <view class="index-page">
    <u-navbar
      title="寄售记录"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
    <u-tabs
      :list="state.olist"
      active-color="#111723"
      v-model="state.tabCurrent"
      item-width="50%"
      @change="change"
    ></u-tabs>
    <scroll-view
      class="scrool"
      :style="{ height: 'calc(100% - 180rpx)' }"
      :scroll-y="true"
      lower-threshold="30"
      @scrolltolower="bottomOut()"
    >
      <view class="wrap" v-for="(item, index) in state.list" :key="index">
        <view class="center">
          <u-image
            width="180"
            height="180"
            :src="item.commodity_image"
          ></u-image>
          <view class="text">
            <view> {{ item.commodity_name }}</view>
            <view>
              {{ state.tabCurrent === 0 ? '买家' : '卖家' }}：{{
                item.from_user_mobile
              }}
            </view>
            <view>价格 ¥{{ item.price }} </view>
            <view class="time">{{ item.pay_time }} </view>
          </view>
        </view>
      </view>
      <u-loadmore
        :status="state.status"
        icon-type="flower"
        margin-top="30"
        margin-bottom="30"
      />
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { consignmentRecord } from '@/api/modules/user'
const state = reactive({
  olist: [
    {
      name: '已卖出'
    },
    {
      name: '已买进'
    }
  ],
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  },
  tabCurrent: 0,
  status: 'loadmore',
  list: [] as any,
  page: 0
})

//触底加载数据
const bottomOut = () => {
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  consignmentRecord({
    page: state.page,
    page_size: 30,
    co_status: state.tabCurrent + 1
  }).then((result) => {
    state.list.push(...result.data.data)
    if (result.data.data.length < 30) state.status = 'nomore'
    else state.status = 'loading'
  })
}
bottomOut()

//
const change = (index: number) => {
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  state.tabCurrent = index
  bottomOut()
}
</script>
<style lang="less" scoped>
::v-deep(.u-hairline-border) {
  ::after {
    border: none !important;
  }
}
.wrap {
  position: relative;
  background-color: #fff;
  margin: 25rpx;
  border-radius: 20rpx;
  padding: 30rpx 30rpx 50rpx 30rpx;
  .top {
    margin-bottom: 20rpx;
  }
  .center {
    display: flex;
    align-items: center;
    .text {
      margin-left: 40rpx;
      line-height: 60rpx;
    }
  }
  .time {
    position: absolute;
    right: 20rpx;
    bottom: 10rpx;
    color: #919191;
  }
}
page {
  background-color: #f3f6fd;
  height: 100%;
}
.index-page {
  height: 100%;
}
</style>
